light mode
night mode
অ্যাজাক্স (Ajax)

উদাহরণ সহ XML Data ব্যবহার

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে XML ডেটা হ্যান্ডলিং (Handling XML Data with Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

শিক্ষকদের তথ্য ধারণকারী XML ডেটা ফেচ করা এবং তা Ajax এর মাধ্যমে প্রসেস করে HTML এ প্রদর্শনের একটি উদাহরণ এখানে দেওয়া হলো। এই উদাহরণে, আমরা শিক্ষকদের নাম, বিষয়, এবং ইমেইল ঠিকানা একটি XML ফাইল থেকে নিয়ে তা ওয়েব পেজে দেখাবো।

উদাহরণ: শিক্ষকের XML Data Parsing এবং Display

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teacher Data Display Example</title>
</head>
<body>
    <h1>Display Teacher Information Using XML and Ajax</h1>
    <button onclick="fetchTeacherData()">Fetch Teacher Data</button>
    <div id="teacher-data-container">
        <!-- শিক্ষকের ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML ফাইলে একটি শিরোনাম (<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।
  • "Fetch Teacher Data" বোতামে ক্লিক করলে fetchTeacherData() ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে XML ডেটা নিয়ে আসবে এবং তা প্রসেস করবে।
  • teacher-data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে XML ডেটা ডিসপ্লে করা হবে।

JavaScript (app.js):

function fetchTeacherData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://example.com/api/teachers.xml", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সফল এবং সম্পূর্ণ কিনা তা চেক করা
            // XML ডেটা রিসিভ করা
            var xmlDoc = xhr.responseXML;

            // XML ডেটা থেকে ভ্যালু এক্সট্র্যাক্ট করা
            var teachers = xmlDoc.getElementsByTagName("teacher");
            var output = "<h2>Teacher Information:</h2><ul>";

            for (var i = 0; i < teachers.length; i++) {
                var name = teachers[i].getElementsByTagName("name")[0].textContent;
                var subject = teachers[i].getElementsByTagName("subject")[0].textContent;
                var email = teachers[i].getElementsByTagName("email")[0].textContent;
                output += `<li><strong>${name}</strong> - ${subject}, Email: ${email}</li>`;
            }

            output += "</ul>";

            // HTML এ ডেটা দেখানো
            document.getElementById("teacher-data-container").innerHTML = output;
        } else if (xhr.readyState === 4) {
            // যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
            document.getElementById("teacher-data-container").innerHTML = "Error fetching teacher data!";
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

XMLHttpRequest অবজেক্ট তৈরি করা:

  • fetchTeacherData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।

রিকোয়েস্ট ওপেন করা:

  • xhr.open("GET", "https://example.com/api/teachers.xml", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।
  • "https://example.com/api/teachers.xml" URL থেকে XML ডেটা ফেচ করা হবে। এটি একটি উদাহরণ URL যেখানে XML ডেটা পাওয়া যাবে।
  • true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।

XML ডেটা প্রসেস করা:

  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।
  • যদি রিকোয়েস্ট সফল হয়, তাহলে xhr.responseXML ব্যবহার করে XML ডেটা প্রাপ্ত হয়েছে।
  • getElementsByTagName() মেথড ব্যবহার করে XML ডেটা থেকে শিক্ষকদের নাম, বিষয়, এবং ইমেইল এক্সট্র্যাক্ট করা হয়েছে।

HTML DOM আপডেট করা:

  • XML ডেটা থেকে এক্সট্র্যাক্ট করা ভ্যালু দিয়ে একটি HTML তালিকা তৈরি করা হয়েছে এবং তা teacher-data-container ডিভে ইনজেক্ট করা হয়েছে।

এরর ম্যানেজমেন্ট:

  • যদি রিকোয়েস্ট ব্যর্থ হয় (readyState === 4 কিন্তু status !== 200), তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

XML Data Example (teachers.xml):

<teachers>
    <teacher>
        <name>John Doe</name>
        <subject>Mathematics</subject>
        <email>john.doe@example.com</email>
    </teacher>
    <teacher>
        <name>Jane Smith</name>
        <subject>Physics</subject>
        <email>jane.smith@example.com</email>
    </teacher>
    <teacher>
        <name>Emily Johnson</name>
        <subject>Chemistry</subject>
        <email>emily.johnson@example.com</email>
    </teacher>
</teachers>

XML ডেটা প্রসেস করার ধাপ:

  1. Ajax রিকোয়েস্ট পাঠানো: XMLHttpRequest ব্যবহার করে একটি GET রিকোয়েস্ট পাঠানো হয়েছে।
  2. XML ডেটা রিসিভ করা: সার্ভার থেকে XML ডেটা রিসিভ হলে তা xhr.responseXML দিয়ে ডকুমেন্ট অবজেক্টে কনভার্ট করা হয়েছে।
  3. XML ডেটা প্রসেস করা: getElementsByTagName() মেথড ব্যবহার করে XML থেকে শিক্ষকদের নাম, বিষয়, এবং ইমেইল এক্সট্র্যাক্ট করা হয়েছে।
  4. HTML DOM আপডেট করা: প্রাপ্ত XML ডেটা ব্যবহার করে HTML তালিকা তৈরি করে teacher-data-container ডিভে ইনজেক্ট করা হয়েছে।

সারসংক্ষেপ:

  • Ajax এবং XML ডেটা প্রসেসিং: Ajax এর মাধ্যমে XML ডেটা রিকোয়েস্ট করে এবং তা প্রসেস করা হয়, যাতে শিক্ষকদের তথ্য HTML এ দেখানো যায়।
  • responseXML: XML রেসপন্স প্রসেস করতে responseXML প্রপার্টি ব্যবহার করা হয়, যা XML ডেটাকে ডকুমেন্ট অবজেক্টে কনভার্ট করে।
  • DOM ম্যানিপুলেশন: XML ডেটা থেকে ভ্যালু নিয়ে HTML এ ইনজেক্ট করা হয়, যা ব্যবহারকারীদের জন্য ডায়নামিকভাবে দেখানো যায়।

আরও দেখুন...

উদাহরণ সহ XML Data ব্যবহার

or

Don't have an account? Register

Promotion